<template>
  <div class="newVs">
    <div class="mask"></div>
    <div class="new_vs">
      <div class="form_contianer">
        <div class="title">忘记密码</div>
        <el-form
          label-position="right"
          label-width="80px"
          :model="formPasswordObj"
          ref="formRef"
        >
          <el-form-item label="手机号">
            <el-input
              v-model="tableRowData.cellPhoneNumber"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <el-input v-model="formPasswordObj.code">
              <template slot="append">
                <span v-if="isShowTime">{{ countDown }}秒重新获取</span>
                <span class="code" @click="codeTextClick" v-else
                  >获取验证码</span
                >
                <!-- <el-button type="primary" plain>获取验证码</el-button> -->
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="formPasswordObj.newPass" type="password">
            </el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input
              v-model="formPasswordObj.affirmPass"
              type="password"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 按钮区域 -->
      <div class="button_wrap">
        <el-button @click="closeBtnClick">关闭</el-button>
        <el-button type="primary" @click="saveBtnClick">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// 获取验证码
import {
  get_code_api,
  forget_password_api
} from '../../../../../../request/store/store_baseInfo_request.js'
export default {
  props: {
    tableRowData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      formPasswordObj: {},
      // 显示倒计时
      isShowTime: false,
      // 默认倒计时
      countDown: 59
    }
  },
  methods: {
    // 获取验证码被点击
    async codeTextClick() {
      // 获取验证码ajax
      const codeParams = {
        accountNumber: this.tableRowData.cellPhoneNumber, // 手机号
        flag: false // 后端要求传false
      }
      const { data: res } = await get_code_api(codeParams)
      console.log('验证码返回的数据:', res)
      if (res.code !== 200 || res.data !== 'OK') {
        return this.$message.warning('获取验证码失败，请重新获取')
      }
      // let successMsg = this.$message.success({
      //   type: 'success',
      //   message: '获取验证码成功',
      //   duration: 1000,
      //   showClose: true
      // })
      // setTimeout(() => {
      //   successMsg.close()
      // }, 1000)
      // 开启倒计时
      this.isShowTime = true
      // 开启一个定时器，60秒后可以重新获取验证码
      let timer = setInterval(() => {
        this.countDown--
        // 小于0的时候，清除定时器，并且隐藏字段，显示相应的字段
        if (this.countDown < 0) {
          // 清除定时器
          clearInterval(timer)
          // 重置时间
          this.countDown = 59
          // 关闭倒计时
          this.isShowTime = false
        }
      }, 1000)
    },
    // 保存
    async saveBtnClick() {
      console.log('ok')
      this.formPasswordObj.accountNumber = this.tableRowData.cellPhoneNumber
      console.log('formPasswordObj', this.formPasswordObj)
      const { data: res } = await forget_password_api(this.formPasswordObj)
      console.log('忘记密码返回的', res)
      if (res.code !== 200) return
      // this.$refs[formRef].resetFields()
      this.$message.success('修改密码成功')
      this.$emit('closeForgetPasswordDialog')
    },
    // 关闭
    closeBtnClick() {
      this.$emit('closeForgetPasswordDialog')
    }
  }
}
</script>

<style lang="less" scoped>
.code {
  color: #67a2ff;
  cursor: pointer;
}
/deep/.el-input-group__append {
  padding: 0 4px;
  cursor: pointer;
}

.title {
  height: 40px;
  width: 100%;
  font-weight: 800;
  display: flex;
  align-items: center;
  background-color: #f8f8f8;
  padding-left: 10px;
}
.button_wrap {
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
  margin-top: 20px;
}
.forgetPassword_wrap {
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
  font-size: 14px;
  color: #606266;
  // line-height: 40px;
  span {
    cursor: pointer;
  }
}
.el-form {
  padding: 2px 30px 0 20px;
}
// 表单样式
.el-form-item {
  margin-bottom: 0px;
}
/deep/.el-form-item__content {
  display: flex !important;
}
/* 新建资料 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 10;
}
.new_vs {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  max-height: 800px;
  z-index: 100;
  background-color: white;
  overflow: auto;
}
//输入框的样式
// input输入框的样式
/deep/.el-input {
  //icon样式
  .el-input__icon {
    line-height: 34px;
  }
  // 宽度生效
  width: 180px;
  height: 32px;
  .el-input__inner {
    height: 32px;
  }
}
</style>
